<template>
    <uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom">
        <view class="popup-content">
            <view class="header">
                <view>商品清单</view>
                <uni-icons type="closeempty" size="30" @click="closeModal"></uni-icons>
            </view>
            <scroll-view scroll-y="true" class="scroll-Y" v-if="list.length > 0">
                <view v-for="(item, index) in list" :key="index" class="list-item">
                    <view class="left-img">
                        <image class="image" :src="easyGetImgUrl(item.ProductImage)" mode="scaleToFill" />
                    </view>
                    <view class="right-container">
                        <view class="name">{{ item.ProductName }}</view>
                        <view class="desc">{{ item.Description }}</view>
                        <view class="price-wrapper">
                            <view class="price"
                                ><text v-if="item.RewardType !=1">￥</text><text v-else>积分</text><text class="text">{{ item.Reward }}</text></view
                            >
                            <view class="count">x{{ item.count?item.count:item.Amount }}</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="mescroll-empty" v-else>
                <image src="/static/img/empty.png"></image>
                <view>~ 暂无数据 ~</view>
            </view>
        </view>
    </uni-popup>
</template>

<script>

export default {
    data() {
        return {
        }
    },
    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },
    methods: {
        openModal() {
            this.$refs.popup.open()
        },
        closeModal() {
            this.$refs.popup.close()
        },
    },
}
</script>

<style lang="scss">
.popup-content {
    height: 80vh;
    background-color: $color-white;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 108rpx;
        padding: 0 30rpx;
        font-weight: 700;
        background-color: #f4f5f6;
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
    }

    .scroll-Y {
        height: calc(100% - 108rpx);

        .list-item {
            display: flex;
            margin: 24rpx;

            .left-img {
                width: 180rpx;
                height: 180rpx;

                .image {
                    width: 100%;
                    height: 100%;
                    border-radius: 8rpx;
                }
            }

            .right-container {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 24rpx;

                .name {
                    @include textTwoLine;
                    font-size: 28rpx;
                }
				.desc{
					font-size: 24rpx;
					color: #666;
				}

                .price-wrapper {
                    display: flex;
                    align-items: center;

                    .price {
                        font-size: 28rpx;
                        font-weight: 700;

                        .text {
                            font-size: 36rpx;
                        }
                    }

                    .count {
                        margin-left: 8rpx;
                        font-size: 24rpx;
                    }
                }
            }
        }
    }

    .mescroll-empty {
        @include noListData;
    }
}
</style>
